<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子代和后端选择器</title>
    <style>
        .box{
        }
        /* 后代选择器 */
        /*
        .box li {
            color: red;
        }
        */
        /* 子代选择器 */
        .box > li {
            color: blue;
        }
        /* .box > ul > li */
        .box ul li {
            color: green;
        }
    </style>
</head>
<body>
    <ul class="box">
        <li>苹果</li>
        <li>香蕉</li>
        <li>猕猴桃</li>
        <ul>
            <li>火龙果</li>
            <li>桃子</li>
            <li>梨</li>
        </ul>
        <li>樱桃</li>
        <li>榴莲</li>
    </ul>
    <ul>
        <li>菠萝</li>
        <li>西红柿</li>
        <li>橙子</li>
    </ul>
</body>
</html>